import React, { Component } from 'react'

// 创建context对象
const UserContext = React.createContext({
  nickName: 'aa',
  level: 0
})

class ProfileHeader extends Component {
  render() {
    const { nickName, level } = this.context

    return (
      <div>
        <h2>用户昵称: {nickName}</h2>
        <h2>用户等级: {level}</h2>
      </div>
    )
  }
}

ProfileHeader.contextType = UserContext

function Profile() {
  return (
    <div>
      <ProfileHeader />
      <ul>
        <li>设置1</li>
        <li>设置2</li>
        <li>设置3</li>
        <li>设置4</li>
      </ul>
    </div>
  )
}

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      nickName: 'll',
      level: 99
    }
  }

  render() {

    return (
      <div>
        <UserContext.Provider value={this.state}>
          <Profile />
        </UserContext.Provider>
      </div>
    )
  }
}